<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/admin.css" media="all">
    <link rel="stylesheet" href="../../css/custom.css" media="all">
    <script src="../../js/echarts.min.5.2.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="layui-row">
        <div class="layui-col-lg6 layui-col-md8 layui-col-sm9 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="my-header">垂直布局</div>
                    <div>
                        <p>标题有主标题和副标题</p>
                        <p>主标题和副标题的属性设置一样</p>
                        <p>标题能设置多个</p>
                        <a target="_blank" style="color: rebeccapurple;"
                            href="https://echarts.apache.org/zh/option.html#title.itemGap">更多设置详情：点击下面的主标题</a>
                        <!-- <p style="color: #b6b6b6;">
                            属性：text、target、textAlign 
                        </p> -->
                    </div>
                </div>
                <div class="layui-card-body">
                    <div id="myEchartsDiv" style="width: 100%; height: 200px;"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var chartDom = document.getElementById('myEchartsDiv');
        var myChart = echarts.init(chartDom);

        let pieChart1Data = {
            "name": "Attitudes",
            "value": 79,
            "value_dec": 78.67,
            "QOQ": 9,
            "QOQ_dec": 9.15,
            "target": 79,
            "prev_quarter": 69.52,
            "respondents": 5259,
            "base_score_dec": 0,
            "base_respondents": 0,
            "base_score": 0
        }

        option = {
            graphic: {
                type: "text",
                left: "center",
                top: "center",
                style: {
                    text: pieChart1Data.value,
                    textAlign: "center",
                    fill: "#44546a",
                    fontSize: 18,
                    fontWeight: 700,
                    fontStyle: "italic",
                },
            },
            tooltip: {
                trigger: "item",
                position: "right",
                formatter: function (params) {
                    if (params.name !== "others") {
                        return (
                            "Resilience: " +
                            params.data.value_dec +
                            "<br>" +
                            "Previous Quarter: " +
                            params.data.prev_quarter +
                            ` (${params.data.QOQ_dec > 0
                                ? `+${params.data.QOQ_dec}`
                                : params.data.QOQ_dec
                            })` +
                            "<br>" +
                            "Respondents: " +
                            params.data.respondents +
                            "<br>" +
                            "Baseline Score: " +
                            params.data.base_score_dec +
                            "<br>" +
                            "Baseline Respondents: " +
                            params.data.base_respondents
                        );
                    } else {
                        return "";
                    }
                },
                backgroundColor: "#fff",
                borderRadius: 2,
                textStyle: {
                    fontFamily: "Graphik",
                    color: "#000",
                    fontSize: 12,
                },
            },
            series: [
                {
                    name: "Attitudes",
                    type: "pie",
                    radius: ["60%", "85%"],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: "inner",
                            formatter: function (params) {
                                return params.value;
                            },
                            textStyle: {
                                fontSize: "14",
                                fontWeight: "bold",
                            },
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: "18",
                                fontWeight: "bold",
                            },
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                        normal: {
                            color: function (params) {
                                let colorList = ["#4472c4", "#e4e8f2"];
                                return colorList[params.dataIndex];
                            },
                        },
                    },
                    data: [
                        {
                            value: pieChart1Data.value,
                            name: pieChart1Data.name,
                            value_dec: pieChart1Data.value_dec,
                            prev_quarter: pieChart1Data.prev_quarter,
                            QOQ_dec: pieChart1Data.QOQ_dec,
                            respondents: pieChart1Data.respondents,
                            base_score_dec: pieChart1Data.base_score_dec,
                            base_respondents: pieChart1Data.base_respondents,
                        },
                        { value: this.otherValue1, name: "others" },
                    ],
                },
            ],
        }

        option && myChart.setOption(option);
    </script>

    <script src="../../js/tool.js"></script>
    <script>
        init()
    </script>
</body>

</html>